<template>
  <div class="Topic">
    <div class="title">
     	<div class="icon" @click="back()">
     		<span></span>
     	</div>
     	<div class="name">
     		主题
     	</div>
     	<div class="icon"></div>
    </div>
    <div class="content" v-if="!isLoad">
        <div class="first">
        	<div class="headimg">
        		<a href="" :style="{'background-image' : 'url('+ this.article.author.avatar_url +')'}"></a>
        	</div>
        	<div class="other">
	        	<a href="">{{this.article.author.loginname}}</a>
	        	<time>{{this.article.create_at}}</time>
	        	<div class="num">#楼主#</div>
        	</div>
        </div>
        <div class="second">
        	<div class="datas">
        		<div class="tit">
        			{{this.article.title}}
        		</div>
        		<div class="bottom">
        			<div class="item">
        			  <i></i>{{this.article.visit_count}}
        		    </div>
        			<div class="item"><i></i>{{this.article.reply_count}}</div>
        		</div>
        	</div>
        	<div class="markdown-body" v-html="this.article.content">
        		
        	</div>
        </div>
        <div class="replies-count">
    	   共(<em>57</em>)条回复
        </div>
    </div>
    <load v-if="isLoad"></load>
  </div>
</template>

<script>
import { leaveDay , parseTime } from '../util/Time'
import load from './load'
export default {
  data () {
    return {
       article:{
       	 author:{
       	 	avatar_url: '',
       	 	loginname: ''
       	 },
       	 create_at:'',
       	 title:'',
       	 visit_count:0,
       	 reply_count:0,
       	 content:''
       },
       isLoad:true,
    }
  },
  components:{
     load
  },
  created(){
  	  this.getArticle();
  },
  methods:{
  	 leaveDay,
  	 parseTime,
  	 back(){
  	 	this.$router.go(-1);
  	 },
  	 async getArticle(){
  	 	this.clearAll();
        let res = await this.$https.get('/topic/'+this.$route.params.id);
        let data = res.data.data;
        this.isLoad = false;
        this.articleParse(data);
  	 },
  	 clearAll(){
        this.isLoad = true;
  	 },
  	 articleParse(data){
        let {author,create_at,title,visit_count,reply_count,content} = data;
        this.article.author = author;
        this.article.create_at = this.leaveDay(this.parseTime(create_at));
        this.article.title = title;
        this.article.visit_count = visit_count;
        this.article.reply_count = reply_count;
        this.article.content = content;
        console.log(this.article);
  	 }
  }
}
</script>

<style lang="stylus">
.Topic
	width 100%
	height 100%
	overflow hidden
	display flex
	flex-flow column wrap
	.title
		height 50px
		display flex
		border-bottom 1px solid rgba(0,0,0,.2)
	.icon
		width 50px
		display flex
		justify-content center
		align-items center
		span
			display block
			width 11px
			height 11px
			position relative
			&:before,&:after
				position absolute
				width 11px
				height 1px
				left 0px
				top 5px
				content ''
				background #000
				transform-origin 0 0
			&:before
				transform rotate(-45deg)
			&:after
				transform rotate(45deg)
	.name
		flex 1
		text-align center
		line-height 50px
		font-size 16px
		font-weight 600
	.content
		flex 1
		overflow auto
		.first
			padding 10px
			border-bottom 1px solid #eee
			display flex
			.headimg
				padding-right 10px
				a
					display block
					overflow hidden
					width 28px
					height 28px
					border-radius 50%
					border 1px solid #ddd
					background-color #eee
					background-position center
					background-size cover
			.other
				flex 1
				display flex
				font-size 12px
				a
					display block
					color #80bd01
					text-decoration none
				time
					flex 1
					padding-left 10px
		.second
			padding 10px
			border-bottom 1px solid #eee
			.datas
				padding 10px
				border-bottom 1px solid #eee
				.tit
					padding 10px 0
					margin 0
					line-height 24px
					font-weight bold
					font-size 22px
					text-align center
					color #222
				.bottom
					display flex
					justify-content center
					.item
						padding 0 5px
						color #666
						font-size 13px
						i
							font-family "iconfont" !important
							font-size 16px
							font-style normal
							-webkit-font-smoothing antialiased
							color #aaa
							-webkit-text-stroke-width 0.2px
							&:before
								content "\E601"
			.markdown-body
				padding 10px 0
				color #24292e
				font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
				font-size 16px
				line-height 1.5
				word-wrap break-word
				
		.replies-count
			border-left 5px solid #80bd01
			padding 10px
			border-bottom 1px solid #eee
			font-size 13px
			em
				color #80bd01
.markdown-text
	margin 0px
	p
		margin-top 0px
		margin-bottom 16px
	img
		max-width 100%
		box-sizing content-box
		background-color #fff
	blockquote
		padding 0 1em
		color #6a737d
		border-left 0.25em solid #dfe2e5
	h2
		padding-bottom 0.3em
		font-size 1.5em
		border-bottom 1px solid #eaecef
		margin-top 24px
		margin-bottom 16px
		font-weight 600
		line-height 1.25
	ul
		padding-left 2em
		padding-bottom 16px
	li+li
		margin-top 0.25em
	a
		color #0366d6
		text-decoration none
		background-color transparent
	ol
		padding-left 2em
		padding-bottom 16px
	pre
		padding 16px
		overflow auto
		font-size 85%
		line-height 1.45
		background-color #f6f8fa
		border-radius 3px
			
			
						
					
				
		
</style>
